<template>
  <div>
      <h3>用户管理-辅助函数</h3>
      <hr>
      <table width="80%" border="1" align="center"> 
          <thead>
              <tr>
                  <th>id</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="item in userList" :key="item.id" align="center">
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.age}}</td>
                  <td>
                      <button @click="del(item.id)">删除</button>
                  </td>
              </tr>
          </tbody>
      </table>
  </div>
</template>

<script>
import useUserStore from '../store/userStore';
import {mapState,mapActions} from 'pinia';
export default {
    computed:{
        ...mapState(useUserStore,['userList'])
    },
    created(){
        console.log(useUserStore());
    },
    methods:{
        ...mapActions(useUserStore,['userAdd','userDel']),
        del(id){
            this.userDel(id);
        }
    }
}
</script>

<style>

</style>